<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
		
			margin: 0;
			
			padding: 0;
			
			height: 100vh;
		
			display: flex;
		
			align-items: center;
		
			justify-content: center;
		
			background-color: #222;
		
		}
		.c{
			border-radius: 50%;
			position: absolute;
			opacity: 0;
			
		}
		.c1{
			width: 60px;
			height: 60px;
			background-color: #009966;
			z-index: 99;
			animation: c1 3s  ease-in-out infinite ;
		}
		.c2{
			width: 100px;
			height: 100px;
			background-color: #009966;
			z-index: 11;
			animation: c2 2s 1s ease-in-out infinite ;
		}
		
		.c3{
			width: 150px;
			height: 150px;
			background-color: #009966;
			animation: c3 2s 2s ease-in-out infinite ;
			/* alternate */
		}
		@keyframes c1{
			0%{
				opacity: 0;
			}
			/* 50%{
				opacity: 1;
			} */
				
			100%{
				opacity: 1;
			}
		}
		@keyframes c2{
			0%{
				opacity: 0;
			}
			/* 50%{
				opacity: 0.7;
			} */
			100%{
				opacity: 0.7;
			}
		}
		@keyframes c3{
			0%{
				opacity: 0;
			}
			/* 50%{
				opacity: 0.4;
			} */
			100%{
				opacity: 0.4;
			}
			
		}
	</style>
	<body>
		<div class="c1 c"></div>
		<div class="c2 c"></div>
		<div class="c3 c"></div>
	</body>
</html>
